<!DOCTYPE html>
<html>
 <head>
  <meta charset="utf-8">
  <title></title>
  <style>
   
   /*日期框图标撑满全框 
      但是图标本身却在框外*/
   input::-webkit-calendar-picker-indicator{
     position: absolute;
     right: 0;
     padding-left: calc(100% - 24px); 
     padding-right: 8px;
    }
    /* 日期标签定宽 
       将日期图标收回矿中*/
       input {
           position: relative;
           width: 140px;
            }


        /* 日期标签 默认不显示 年月日 
    此时日期框不可用*/
        input::-webkit-datetime-edit {
                display: none;
        }
  
  /* 日期标签 显示 placeholder 
      添加一个默认值让日期框可选*/
      input:empty:before{ 
          content: attr(placeholder);
           }

  </style>

 </head>
 <body>
  <input type="date" id="date"  class="show_placeholder" placeholder="请选择日期" onchange="changeDate(this.id)"/>
  <script>
   //js操作
   //
   function changeDate(idval){
    var dom=document.getElementById(idval);
    var value=dom.value;
    if(value!=null||value!=""){
         dom.setAttribute("placeholder",value);
    }
   }
   //jquery操作
   /*时间改变且有值时，恢复日期显示；否则仍显示 placeholder
          $('#date').change(function(){
                  if(!$(this).val()){
                          $(this).addClass('show_placeholder');
                  }else{
                          $(this).removeClass('show_placeholder');
                  }
          });
   */
  </script>
  
   
 </body>
</html>